<template>
  <!-- //  wel 顶部仪表盘 -->
  <!-- // etailed information -->
  <div class="wel-top-gauge">
    <div id="mychart" style="width:440px; height: 250px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { setTimeout } from "timers";
export default {
  name: "WelTopGauge",
  data() {
    return {
      myChart: null,
      // 3. 指定图表的配置项和数据
      option: {
        // backgroundColor: ragb(0, 0, 0, 0),
        tooltip: {
          formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
          show: true,
          right: "50px"
        },
        series: [
          {
            name: "内存",
            type: "gauge",
            center: ["35%", "50%"], // 默认全局居中
            radius: "90%",
            min: 0,
            max: 100,
            endAngle: 45,
            splitNumber: 5,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.29, "lime"], [0.86, "#1e90ff"], [1, "#ff4500"]],
                width: 2,
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: "bolder",
                // color: '#fff',
                shadowColor: "#fff" //默认透明
                // shadowBlur: 0
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
                shadowColor: "#fff" //默认透明
                // shadowBlur: 0
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                // color: '#fff',
                shadowColor: "#fff" //默认透明
                // shadowBlur: 0
              }
            },
            pointer: {
              width: 5,
              shadowColor: "#fff", //默认透明
              shadowBlur: 5
            },
            title: {
              // offsetCenter: [0, "-30%"], // x, y，单位px
               // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              textStyle: {
                fontWeight: "bolder",
                fontStyle: "italic",
                // color: '#fff',
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              formatter: "{value}%"
            },
            data: [{ value: 1.5, name: "内存" }]
          },
          {
            name: "硬盘",
            type: "gauge",
            center: ["65%", "50%"], // 默认全局居中
            radius: "90%",
            min: 0,
            max: 100,
            startAngle: 135,
            endAngle: -45,
            splitNumber: 5,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.2, "lime"], [0.8, "#1e90ff"], [1, "#ff4500"]],
                width: 2,
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
                shadowColor: "#fff" //默认透明
                // shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: "bolder",
                shadowColor: "#fff" //默认透明
              }
            },
            // 分隔线
            splitLine: {
              length: 15, // 属性length控制线长
              // 属性lineStyle（详见lineStyle）控制线条样式
              lineStyle: {
                width: 3,
                shadowColor: "#fff" //默认透明
              }
            },
            pointer: {
              width: 5,
              shadowColor: "#fff", //默认透明
              shadowBlur: 5
            },
            title: {
              fontWeight: "bolder",
              fontStyle: "italic",
              shadowColor: "#fff", //默认透明
              shadowBlur: 10
            },
            detail: {
              formatter: "{value}%"
            },
            data: [{ value: 0.5, name: "硬盘" }]
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.drawChart(0, 0);
  },
  methods: {
    drawChart(memoryRate, diskRate) {
      // 在父组件 vel 中请求完数据之后也会调用此方法
      this.myChart = echarts.init(document.getElementById("mychart"));
      // memory
      this.option.series[0].data[0].value = memoryRate;
      // disk
      this.option.series[1].data[0].value = diskRate;
      this.myChart.setOption(this.option);
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
</style>
